@extends('backend::layout')
@section('title',$page_title)
@push('styles')
    <link href="//at.alicdn.com/t/font_1365598_t1q6a8gmjcd.css" rel="stylesheet">
  {{--  <link href="{{asset(config('view.plugin').'/layui/layui_ext/dtree/font/iconfont.css')}}" rel="stylesheet">--}}
    <link href="{{asset(config('view.plugin').'/layui/layui_ext/dtree/dtree.css')}}" rel="stylesheet">
@endpush
@section('content')
    <div class="row match-height">
        @component('backend::component.tab')
            @slot('tabs')
                <li class="nav-item">
                    <a class="nav-link active"
                       href=""
                    >
                        <i class="hcl hcl-shu mr-2"></i>节点关系
                    </a>
                </li>
                {{--<li class="nav-item">--}}
                    {{--<a class="nav-link"--}}
                       {{--href=""--}}
                    {{-->--}}
                        {{--<i class="hcl hcl-line2 mr-2"></i>节点关系--}}
                    {{--</a>--}}
                {{--</li>--}}
            @endslot
            <div  class="tab-pane active show">
                @component('backend::component.form.input-group')
                    @slot('attr') style=width:450px;display:inline-flex @endslot
`                    @slot('input')
                        @component('backend::component.form.input')
                            @slot('name') user @endslot
                            @slot('value') {{request()->input('user','')}} @endslot
                        @endcomponent
                    @endslot
                    @slot('button')
                        @component('backend::component.form.button')
                            @slot('title') 查找 @endslot
                            @slot('size') sm @endslot
                            @slot('attr') id=searchBtn data-target=user @endslot
                        @endcomponent
                        @component('backend::component.form.button')
                                @slot('title') 返回根节点 @endslot
                                @slot('size') sm @endslot
                                @slot('attr') onclick=(function(){window.location.href="{{url()->current()}}"})()@endslot
                         @endcomponent

                        @component('backend::component.form.button')
                            @slot('title') 全部展开 @endslot
                            @slot('size') sm @endslot
                            @slot('attr') dtree-id=actionsTree dtree-menu=moveDown @endslot
                        @endcomponent


                    @endslot
                @endcomponent
                <div id="toolbarDiv" style="position: relative">
                    <ul id="actionsTree" data-content="{{$root}}" data-id="0"> </ul>
                </div>
            </div>
        @endcomponent
    </div>
@endsection
@push('scripts')
    <script>
        layui.use(['element','layer', 'dtree'], function(){
            var layer = layui.layer,
                dtree = layui.dtree,
                $ = layui.$;
            var data = $('#actionsTree').data('content');
            console.log(data);
            if(data.length>0){
                dtree.render({
                    elem: "#actionsTree",  //绑定元素
                    url:"{{route('b_User_asyncGetJiedianChildren',['root_id'=>$root_id])}}",
                    response: {statusCode: 1, rootName: "data", treeId:"id"},
                    dot:false,
                    initLevel:1,
                    line:true,
                    menubar:true,
                    menubarTips:{
                        group:[] // 按钮组制空
                    },
                    toolbarScroll:"#toolbarDiv", //划重点，必须配置，属性含义请参考文档
                    toolbarLoad: "node",  // 表示工具栏加载的节点，  可选的值还有：noleaf
                    toolbar:true,
                   toolbarWay:"fixed",
                    toolbarShow:[],
                    toolbarStyle: {
                        title: "会员"
                    },
                    toolbarExt:[{
                        toolbarId: "edit",
                        icon:"dtree-icon-bianji",
                        title:"编辑会员",
                        handler: function(node,$div){
                            var nodeInfo = JSON.parse(node.basicData);
                            window.open(nodeInfo.editUrl);
                        }
                    },{
                        toolbarId: "add",
                        icon:"dtree-icon-user-add",
                        title:"添加会员",
                        handler: function(node,$div){
                            var nodeInfo = JSON.parse(node.basicData);
                            window.open(nodeInfo.addUrl);
                        }
                    }],
                    done:function(data, obj){
                        $("#searchBtn").off('click').click(function(){
                            var value = $('input[name="user"]').val();
                            if(value){
                              window.location.href = handleUrl({user:value});
                            }
                        });
                    },
                    data:data,
                    nodeIconArray:{"3":{"open":"dtree-icon-user-relate","close":"dtree-icon-users"}},  // 自定扩展的二级非最后一级图标，从1开始
                    leafIconArray:{"11":"dtree-icon-yonghu"},  // 自定义扩展的二级最后一级图标，从11开始
                    icon: ["3","11"] // 使用
                });

                //单击节点 监听事件
                dtree.on("node('actionsTree')" ,function(param){

                });
            }
        });
    </script>
    <script type="text/javascript">
        function handleUrl(newData,url) {
            var url = url||window.location.href;
            if(!newData || newData == '' || newData == undefined){
                return  url;
            }
            var hostName = url;
            if(url.indexOf("?") >= 1){
                var urlArr = url.split('?')
                hostName = urlArr[0];
                var paramsObj = urlToArr(urlArr[1]);
                if(paramsObj){
                    $.extend(paramsObj,newData)
                }
            }else{
                paramsObj = newData;
            }
            return  hostName+"?"+jQuery.param(paramsObj);
        }


        function urlToArr(uri) {

            uri = decodeURIComponent(uri);
            //拼接数组
            var arrUrl = uri.split('&');
            var urlObj = {};
            var len = arrUrl.length;
            for (var i=0; i<len; i++){
                if(arrUrl[i].indexOf('=')>=1){
                    var params = arrUrl[i].split('=');
                    if(params[0]!=''&&params[1]!=''){
                        urlObj[params[0]] = params[1];
                    }
                }
            }
            return $.isEmptyObject(urlObj)?false:urlObj;
        }
    </script>
@endpush